<template>
    <div class="rt">
        <div class="header flip-horizontal">水电用量</div>
        <div class="body">
            <div class="mi">
                <div class="xi">
                    <img src="@/assets/image/用水量.png" alt="">
                    <span>总用电量 72670</span>
                </div>
                <div class="xi">
                    <img src="@/assets/image/用电量.png" alt="">
                    <span>总用水量 69035</span>
                </div>
            </div>
            <div ref="chart" style="width: 100%;height:90%"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeMount } from 'vue';

const chart = ref<HTMLElement | null>(null);
onMounted(() => {
    if (chart.value) {
        const myChart = echarts.init(chart.value)
        myChart.setOption({
            legend: {
                textStyle: {
                    color: '#fff' // 设置图例文字颜色为白色
                },
                icon: 'circle',
                itemWidth: 15, // 设置图例图标宽度为10像素
                itemHeight: 15, // 设置图例图标高度为10像素
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                    { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        })
    }
})
</script>

<style lang="scss" scoped>
.rt {
    width: 100%;
    height: 100%;
    //   padding: 100px 50px;
    padding-left: 140px;

    .header {
        width: 75%;
        height: 8%;
        background: url("@/assets/image/左.png") no-repeat;
        background-size: 97% 100%;
        color: white;
        font-weight: 800;
        display: flex;
        align-items: center;
        padding-left: 30px;
        margin-top: 150px;
    }

    .body {
        width: 68%;
        height: 75%;
        margin-top: 30px;
        background-color: rgba(12, 29, 95, .8);
        padding: 40px 40px 30px 40px;

        .mi {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .xi {
                height: 110px;
                border: 1px solid skyblue;
                color: white;
                display: flex;
                align-items: center;
                // line-height: 110px;
            }
        }
    }
}
</style>